<template>
  <div class="home">
    <div id="map_canvas"></div>
  </div>
</template>
<script>
import { styleJson } from '@data/mapjson/styleJson';
export default {
  name: 'Home',
  components: {},
  data(){
    return{
      styleType:'JSON', // 可选值JSON和'',JSON是地图JSON的样式，''是默认的样式
      layer:null
    };
  },
  props:{
    config:{
      type:Object,
      default:() => {
        return{};
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted(){
    this.getList();
  },
  methods:{
    init(){
      // 创建地图实例
      var map = new window.BMapGL.Map('map_canvas',{
        enableRotate: false, // 禁止地图旋转和倾斜可以通过配置项进行设置
        enableTilt: false
      });
      // 初始化地图，设置中心点坐标和地图级别
      var center = new window.BMapGL.Point(121.87046110537483, 29.477720199733763);
      map.centerAndZoom(center, 15);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      // 设置地图样式
      map.setMapStyleV2({
        styleJson: this.styleType==='JSON'?styleJson:''
      });
      // 设置地图旋转角度
      // map.setHeading(64.5);
      // 设置地图的倾斜角度
      // map.setTilt(73);

      // 2. 创建MapVGL图层管理器
      var view = new window.mapvgl.View({
        map: map
      });

      // 3. 创建可视化图层，并添加到图层管理器中
      this.layer = new window.mapvgl.IconLayer({
        draw: 'icon',
        width: 71,
        height: 111,
        // size:74,
        enablePicked: true, // 是否可以拾取
        // selectedIndex: -1, // 选中项
        // selectedColor: '#ff0000', // 选中项颜色
        autoSelect: false, // 根据鼠标位置来自动设置选中项
        icon: 'https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/map-icon.png',
        onClick: (e,$event) => { // 点击事件
          console.log('click', e,$event);
          if(e.dataItem){
            const { dataInfo,coordinates } = e.dataItem.geometry;
            // 添加信息窗口
            var opts = {
              width : 150, // 信息窗口宽度
              height: 80, // 信息窗口高度
              title : '' , // 信息窗口标题
              message:''
            };
            var nativePop = `
              <style>
                .nativePop{
                  background-color: skyblue;
                  width:20vw;
                  height:12vh
                }
              </style>
              <div class="nativePop">${ dataInfo }</div>
            `;
            var infoWindow = new window.BMapGL.InfoWindow(nativePop, opts); // 创建信息窗口对象
            var point = new window.BMapGL.Point(coordinates[0],coordinates[1]);
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          }
        },
      });
      view.addLayer(this.layer);
    },
    getList(){
      setTimeout(() => {
        // 4. 准备好规范化坐标数据
        var data = [
          {
            geometry: {
              type: 'Point',
              coordinates: [ 121.87046110537483, 29.477720199733763 ],
              dataInfo:'我是点中包含的详细信息1，自定义属性dataInfo'
            },
          },
          {
            geometry: {
              type: 'Point',
              coordinates: [ 121.86046120537483, 29.473750199733763 ],
              dataInfo:'我是点中包含的详细信息2，自定义属性dataInfo'
            },
          },
        ];
        // 5. 关联图层与数据，享受震撼的可视化效果
        this.layer.setData(data);
      },500);
    }
  }
};
</script>

<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
  position: relative;
    #map_canvas {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin:0;
      font-family:"微软雅黑";}

/* 样式穿透 修改百度地图原有样式 */
/* 去掉百度地图logo--begin */
  ::v-deep .BMap_cpyCtrl {
      display: none;
  }
  ::v-deep .anchorBL {
      display: none;
  }
  ::v-deep .BMap_bubble_content{
    width: companyW(469vw) !important;
    height: companyH(514vh) !important;
  }
  // :deep .BMap_bubble_pop {
  //   z-index: 999999 ;
  // }
  // 去掉信息窗口阴影
  ::v-deep .shadow {
      display: none !important;
      div{
        img{
          width: 0 !important;
          height: 0 !important;
        }
      }
  }
}
</style>
